const {merge} = require('webpack-merge');
const common = require('./webpack.common');

const {CleanWebpackPlugin} = require('clean-webpack-plugin');
// 文件拷贝
// const CopyWebpackPlugin = require("copy-webpack-plugin");
// css提取
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// css压缩
// const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
// eslint-disable-next-line no-unused-vars
const CompressionPlugin = require('compression-webpack-plugin');


// preload、prefetch
// prefetch: resource is probably needed for some navigation in the future
// preload: resource will also be needed during the current navigation
// eslint-disable-next-line no-unused-vars
const PreloadWebpackPlugin = require('@vue/preload-webpack-plugin');

// build progress bar
const WebpackBar = require('webpackbar');

let {appDist, appSrc, resolveApp } = require('./paths');

// 是否启用prefetch
let enablePrefetch = true;
let prefetchPlugins = enablePrefetch ? [
    new PreloadWebpackPlugin({
        rel: 'preload',
        include: 'initial', // all,initial
        fileBlacklist: [/\.map$/]
    }),
    new PreloadWebpackPlugin({
        rel: 'prefetch',
        include: 'asyncChunks', // initial, asyncChunks, allChunks,, or 'allAssets' for fonts、images。
    })
] : [];
module.exports = merge(common, {
    mode: 'production', // development, production
    // cache: {
    //     type: 'filesystem',
    //     // 当构建依赖的config文件内容发生变化时，缓存失效
    //     buildDependencies: {
    //         config: [__filename],
    //     },
    //     // version: '',// 缓存数据的版本,版本更新时，缓存失效
    // },
    stats: 'errors-only',
    // stats: {
    //     modules: false,
    //     children: false,
    //     chunks: false,
    //     chunkModules: true // 推荐: 只显示打包的chunkModule信息
    // },
    // 注意SourceMapDevToolPlugin和devtool不可共存
    devtool: false, // false, source-map
    entry: {
        // reactApp: resolveApp('src/index.jsx'), // react入口
        vueApp: resolveApp('src/main.js'),  // vue入口
    },
    // 打包结果性能提示
    performance: {
        hints: 'warning', // 'warning','error'
        maxAssetSize: 250000, // 包大小超过250k，产生警告
    },
    output: {
        publicPath: '/app/',
        path: appDist,
        filename: 'js/[name].[contenthash:8].js',
        chunkFilename: 'js/[name].[contenthash:8].js',
        // asset资源模块，替代以前的raw-loader,file-loader，url-loader
        assetModuleFilename: 'assets/[name].[contenthash:8][ext]',
        clean: true, // clean the output directory
        // chunkLoadingGlobal: "webpackChunkwebpack", // webpackt5配置
        // jsonpFunction: `webpackJsonp_${packageName}`,// webpack4配置
    },
    module: {
        // 用于处理不需要webpack解析的模块，提高构建速度
        // noParse: /jquery|lodash/,
        rules: [
            // 图片资源
            {
                test: /\.(png|jpg|jpeg|gif|cur)$/,
                // https://webpack.docschina.org/guides/asset-modules/
                // https://webpack.docschina.org/configuration/module/#ruletype
                include: [appSrc],
                type: 'asset/resource',
                // 自定义文件名，可覆盖output中assetModuleFilename配置
                generator: {
                    filename: 'images/[name].[contenthash:8][ext]'
                }
            },
            // 字体
            {
                test: /.(woff|woff2|eot|ttf|otf|svg)$/i,
                include: [appSrc],
                type: 'asset/resource',
                // 自定义文件名，可覆盖output中assetModuleFilename配置
                generator: {
                    filename: 'fonts/[name].[contenthash:8][ext]'
                }
            },
            // css,sass样式资源
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    // postcss-loader 自动搜索配置文件'postcss.config.js'
                    'postcss-loader',// 添加css前缀
                    'sass-loader',
                ],
            },
            // less
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',// 添加css前缀
                    'less-loader',
                ],
            },
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        // sourcemap
        // new webpack.SourceMapDevToolPlugin({        
        //     filename: '[file].map',
        //     append: '\n//# sourceMappingURL=https://example.com/sourceMap/[url]'
        // }),
        // 提取css
        new MiniCssExtractPlugin({
            filename: 'css/[name].[contenthash:8].css',
            chunkFilename: 'css/[name].[contenthash:8].css',
            // chunkFilename: 'css/[name].[id].[contenthash:8].css'
        }),
        new WebpackBar(),
        // new webpack.ProgressPlugin(),

        // gzip压缩
        // new CompressionPlugin({
        //     test: /\.(js|css)$/,
        //     threshold: 10240, // 大于10k才压缩          
        //     minRatio: 0.8
        // }),
        // new CopyWebpackPlugin({
        //     patterns: [
        //       {
        //         from: 'appPublic',
        //         to: 'static',
        //         globOptions: { ignore: ['*.DS_Store','*.html'] },
        //         noErrorOnMissing: true,
        //       },
        //     ],
        // }),
        // 启用Scope Hoisting，默认production模式下已经启用
        // new webpack.optimize.ModuleConcatenationPlugin(),
        ...prefetchPlugins,
    ]
});